<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content="" />
    <title>写项目经验</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link href="css/Animation.css" rel="stylesheet" type="text/css">
    <link href="css/slider.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="images/icon.ico">
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/slider.js" type="text/javascript"></script>
    <script src="js/html5.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/wow.min.js" type="text/javascript"></script>
    <link href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery.js"></script>
    <script src="js/html5.js"></script>
    <script src="js/tool.js"></script>
    <script type="text/javascript">

        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true
        });
        wow.init();
        window.onload = function () {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            var btn0 = document.getElementById("newbutton");
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn");
            var otxt = document.getElementById("otxt");

            btn2.onclick = function () {
                div2.style.display = "none";
            }
            btn0.onclick = function () {
                div2.style.display = "block";
            }
            btn1.onclick = function () {
                if (!otxt.value) {
                    alert("请先填写资料!")
                } else {
                    var div3 = document.createElement("div");
                    var text1 = document.createTextNode(otxt.value);
                    var btn2 = document.createElement("button");
                    div3.appendChild(text1);
                    btn2.innerHTML = "X";
                    div3.appendChild(btn2);
                    div1.appendChild(div3);
                    div3.style.backgroundColor = randomColor();
                    otxt.value = "";
                }
            }
            div1.onclick = function (ev) {
                var e = ev || window.event;
                var target = e.target || window.event.srcElement;
                if (target.nodeName.toLowerCase() == "button") {
                    div1.removeChild(target.parentNode);
                }


            }
            drag(div2);
            function drag(node){
                var offsetX = 0;
                var offsetY = 0;

                node.onmousedown = function(ev){
                    var e = ev || window.event;
                    //记录相对距离
                    offsetX = e.clientX - node.offsetLeft;
                    offsetY = e.clientY - node.offsetTop;

                    //编写拖拽
                    document.onmousemove = function(ev){
                        var e = ev || window.event;
                        node.style.left = e.clientX - offsetX + 'px';
                        node.style.top = e.clientY - offsetY + 'px';

                    }

                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            }
            otxt.onkeydown = function (ev) {
                var e = ev || window.event;
                if (e.keyCode == 13 && e.ctrlKey) {
                    btn1.onclick();
                }
            }

        }
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 500px;
            height: 200px;
            border: 2px solid red;
            margin: 0 auto;
            margin-top: 200px;
        }

        #div1 div {
            border-bottom: 1px dashed red;
            position: relative;
            line-height: 18px;
        }

        #div1 div button {
            position: absolute;
            right: 2px;
        }

        #div2 {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: absolute;
            top: 100px;
            left: 30px;
            display: none;
        }

        #div3 {
            height: 30px;
            background-color: skyblue;
        }

        #btn {
            margin-left: 303px;
            width: 45px;
            height: 30px;
        }

        #btn1 {
            height: 30px;
            width: 45px;
        }

        #div2 textarea {
            width: 100%;
            margin: -1px;
            height: 370px;
        }
        #toTop{
            width: 50px;
            height: 65px;
            border: 1px solid black;
            background-color: #f3f6f6;
            opacity: 0.5;
            text-align: center;
            position: fixed;
            right: 80px;
            bottom: 0px;
        }
    </style>
</head>

<body>
<!--索引-->
<header class="navbar-fixed-top headerbg">
    <div class="container-fluid">
        <div class="logo">
            <h3 style="line-height: 30px;font-size: 24.5px;font-family: inherit;font-weight: bold;line-height: 20px;color: inherit;text-rendering: optimizelegibility;"><a href="#"><span style="font-size: 30px;">朋心合力</span></a></h3>
        </div>
        <div class="navBox hidden-xs hidden-sm">
            <ul class="navList list-unstyled">
                <li class="navLi">
                    <h3><a href="/index"><span>首页</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/publish"><span>项目发布</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/course"><span>课程学习</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/lookingprojects"><span>项目广场</span></a></h3>
                    <div class="navSub">
                        <ul class="navSubList list-unstyled">
                            <li class="navSubLi">
                                <h4><a href="/lookingtalents">● 寻找合伙人</a></h4>
                            </li>
                            <li class="navSubLi">
                                <h4><a href="/lookingprojects">● 寻找项目</a></h4>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="navLi on">
                    <h3><a href="/userInformation"><span>个人主页</span></a></h3>
                </li>
            </ul >
        </div>
    </div>
</header>
<!--轮播动画-->
<div class="banner1" style="width: 100%;height:700px ;position: relative;height: 600px;">
    <div style="position: absolute;margin-top: 150px;margin-left: 225px;">
        <button id="newbutton">写项目经验</button>
        <div id="div1"></div>
        <div id="div2">
            <div id="div3">
                <button id="btn1">提交</button>
                <button id="btn">取消</button>
            </div>
            <textarea name="" id="otxt" cols="30" rows="10"></textarea>
        </div>
    </div>

</div>

<!--底部样式-->
<footer class="footerBg">
    <div class="container">
        <div class="ptb40">
            <div class="footTopL">
                <dl class="clearfix" style="width: 400px; margin-left: 60px;">
                    <dt>关于我们</dt>
                    <dd><a href="#">联系地址</a></dd>
                    <dd><a href="#">荣誉资质</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>系统团队</dt>
                    <dd><a href="#">林某</a></dd>
                    <dd><a href="#">李某</a></dd>
                    <dd><a href="#">蔡某</a></dd>
                    <dd><a href="#">周某</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 100px;">
                    <dt>培训中心</dt>
                    <dd><a href="#">java类培训</a></dd>
                    <dd><a href="#">c/c++类培训</a></dd>
                    <dd><a href="#">Python类培训</a></dd>
                    <dd><a href="#">go语言类培训</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>权限介绍</dt>
                    <dd><a href="#">队长权限</a></dd>
                    <dd><a href="#">队员权限</a></dd>
                    <dd><a href="#">惩罚机制</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="CopyRight">
        <div class="container"><span class="footer_logo"><img src="images/footer_logo.png"></span><span
                class="CopyRight_name">朋心合力平台版权所有</span></div>
    </div>
</footer>
<div id="toTop">
    <i class="arrow up icon">
    </i>
    <p style="margin-top: 10px">&nbsp;返回顶部</p>
</div>
<script type="text/javascript">
    window.onload=function () {
        var oToTop=document.getElementById("toTop");
        oToTop.onclick=function () {
            document.documentElement.scrollTop="0px";
            document.body.scrollTop="0px";
        }
    }
</script>

</body>

</html>